<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未来智慧综合能源管理系统-成本分析</title>
    <link rel="stylesheet" href="../js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="../css/svg.css" type="text/css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/engineer.css">
    <link rel="stylesheet" href="../css/iconfonts/iconfont.css">
</head>
<body class="">
<div class="page" id="app">
    <div class="header">
        <div class="header-top">
            <a href="" class="logo icon iconfont icon-logo"></a>
            <div class="title">
                <p>智慧综合能源管理系统</p>
                <span>Smart Integrated Energy Management System</span>
            </div>
            <div class="user-options">
                <span class="user">Admin</span><span class="line">|</span><a href="javascript:void(0)">注销</a>
            </div>
            <div class="top-notice">
                <ul>
                    <li><a href="">1头部信息滚动头部信息滚动头部信息滚动头部信息滚动头部信息滚动1</a></li>
                    <li><a href="">2头部信息滚动头部信息滚动头部信息滚动头部信息滚动头部信息滚动12</a></li>
                    <li><a href="">3头部信息滚动头部信息滚动头部信息滚动头部信息滚动头部信息滚动13</a></li>
                </ul>
            </div>
            <div class="main-menu">
                <p class="date">2017年4月3日 星期一 15:30</p>
                <ul>
                    <li class="active"><a href=""><i class="icon iconfont icon-water"></i><span>水</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-elec"></i><span>电</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-gass"></i><span>气</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-mei"></i><span>煤</span></a></li>
                    <li><a href=""><i class="icon iconfont icon-swz"></i><span>生物质</span></a></li>
                </ul>
            </div>
        </div>
        <div class="header-bottom">
            <a href="#" class="home"><i class="icon iconfont icon-home"></i></a>
            <div class="bread-thumb">
                <span>用能分析</span>
                <i class="icon iconfont icon-arroow"></i>
                <span>基本分析</span>
            </div>
            <div class="rbg"></div>
            <div class="menu">
                <a href="javascript:void(0)" class="prev-menu-btn icon iconfont icon-btn-close"></a>
                <div class="menu-box">
                    <div class="menu-wrapper">
                        <ul class="menu-leave1">
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jbxx"></i><span>基本信息</span></a></li>
                            <li>
                                <a href="yngl.html"><i class="icon iconfont icon-yngl"></i><span>用能概览</span></a>
                            </li>
                            <li><a href=""><i class="icon iconfont icon-gjfx"></i><span>用能分析</span></a></li>
                            <li class="active"><a href="javascript:void(0)"><i class="icon iconfont icon-jfgl"></i><span>高级分析</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>节能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>报表中心</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-bjgl"></i><span>报警管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jfgl"></i><span>计费管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-sbgl"></i><span>重点设备管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>企业用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>车间用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>工艺用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>产品用能管理</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>企业用能看板</span></a></li>
                            <li><a href="javascript:void(0)"><i class="icon iconfont icon-jngl"></i><span>用能维护</span></a></li>
                        </ul>
                    </div>
                    <div class="sub-menu">
                        <div class="inner">
                            <ul>
                                <li>
                                    <a href="Profile.html">企业简介</a>
                                    <span>|</span>
                                    <a href="Agency.html">能源机构管理</a>
                                    <span>|</span>
                                    <a href="System.html">能源管理制度</a>
                                    <span>|</span>
                                    <a href="Engineer.html">工程师资源</a>
                                    <span>|</span>
                                    <a href="Assets.html">计量器具管理</a>
                                    <span>|</span>
                                    <a href="nywlt.html">能源网络图</a>
                                    <span>|</span>
                                    <a href="nylxt.html">能源流向图</a>
                                </li>
                                <li></li>
                                <li>
                                    <a href="data-query.html">数据查询</a>
                                    <span>|</span>
                                    <a href="ynzj.html">用能足迹</a>
                                    <span>|</span>
                                    <a class="active" href="jbfx.html">基本分析</a>
                                    <span>|</span>
                                    <a href="index.html">对比分析</a>
                                    <span>|</span>
                                    <a href="pmtj.html">排名统计</a>
                                </li>
                                <li>
                                    <a class="active" href="cbfx.html">成本分析</a>
                                    <span>|</span>
                                    <a href="shfx.html">损耗分析</a>
                                    <span>|</span>
                                    <a href="fhfx.html">负荷分析</a>
                                    <span>|</span>
                                    <a href="xlfx.html">需量分析</a>
                                    <span>|</span>
                                    <a href="hjfx.html">环境分析</a>
                                    <span>|</span>
                                    <a href="ycfx.html">预测分析</a>
                                </li>
                                <li>
                                    <a href="jzfx.html">基准分析</a>
                                    <span>|</span>
                                    <a href="ynpg.html">用能评估</a>
                                    <span>|</span>
                                    <a href="zbfx.html">指标分析</a>
                                </li>
                                <li>
                                    <a  href="Report.html">单点报表</a>
                                    <span>|</span>
                                    <a href="jxwbb.html">经信委报表</a>
                                </li>
                                <li>
                                    <a  href="txbj.html">通讯故障</a>
                                    <span>|</span>
                                    <a href="ycbj.html">异常数据</a>
                                    <span>|</span>
                                    <a href="qtbj.html">设备启停</a>
                                    <span>|</span>
                                    <a href="debj.html">超定额报警</a>
                                    <span>|</span>
                                    <a href="gybj.html">工艺控制报警（生产）</a>
                                    <a href="Report.html">单点报表</a>
                                </li>
                                <li>
                                    <a href="jfsz.html">计费设置</a>
                                    <span>|</span>
                                    <a href="dbkh.html">电表开户</a>
                                    <span>|</span>
                                    <a href="khgl.html">客户管理</a>
                                    <span>|</span>
                                    <a href="dyfy.html">当月费用</a>
                                    <span>|</span>
                                    <a href="lszd.html">历史账单</a>
                                </li>
                                <li>
                                    <a href="ssjk.html">实时监测</a>
                                    <span>|</span>
                                    <a href="sbynfx.html">设备用能分析</a>
                                    <span>|</span>
                                    <a href="sbclsr.html">设备产量输入（生产）</a>
                                    <span>|</span>
                                    <a href="sbdepz.html">设备定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="sbnxdb.html">设备能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="sbzhnxqs.html">设备综合能效趋势（生产）</a>
                                    <span>|</span>
                                    <a href="sbnhbb.html">设备能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="qynhsj.html">企业能耗数据（生产）</a>
                                    <span>|</span>
                                    <a href="cpcltj.html">产品产量统计（生产）</a>
                                    <span>|</span>
                                    <a href="cpdhtj.html">产品单耗统计（生产）</a>
                                    <span>|</span>
                                    <a href="cpdhbb.html">产品单耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="cjdepz.html">车间定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="cjnxdb.html">车间能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="cjzhnhqs.html">车间综合能耗趋势（生产）</a>
                                    <span>|</span>
                                    <a href="cjnhbb.html">车间能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="gyjbxx.html">工艺基本信息（生产）</a>
                                    <span>|</span>
                                    <a href="gyclsr.html">工艺产量输入（生产）</a>
                                    <span>|</span>
                                    <a href="gydepz.html">工艺定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="gynxdb.html">工艺能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="gynhbb.html">工艺能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="cpdepz.html">产品定额配置（生产）</a>
                                    <span>|</span>
                                    <a href="cpnxdb.html">产品能效对标（生产）</a>
                                    <span>|</span>
                                    <a href="cpzhnhqs.html">产品综合能耗趋势（生产）</a>
                                    <span>|</span>
                                    <a href="cpnhbb.html">产品能耗报表（生产）</a>
                                </li>
                                <li>
                                    <a href="qykb.html">企业看板（生产）</a>
                                    <span>|</span>
                                    <a href="cjkb.html">车间看板（生产）</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <a href="javascript:void(0)" class="next-menu-btn icon iconfont icon-btn-open"></a>

            </div>
            <div class="lbg"></div>
        </div>
    </div>
    <div class="content" style="top:180px;bottom: 10px;">
        <div class="ynzj">
            <table width="100%" cellpadding="0" cellspacing="0" class="sortTabel cbfx-table">
                <thead>
                    <tr>
                        <th>用能类别</th>
                        <th><p>昨日能耗成本</p><br><span>(元)</span></th>
                        <th><p>今日能耗成本</p><br><span>(元)</span></th>
                        <th><span style="color:#00C8FF">上月能耗成本</span><br><span>(元)</span></th>
                        <th><span style="color:#00FF00">本月能耗成本</span><br><span>(元)</span></th>
                        <th><p>去年能耗成本</p><br><span>(元)</span></th>
                        <th><p>今年能耗成本</p><br><span>(元)</span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,$index) in DataList">
                        <!--<td><p v-text="item.">电</p></td>-->
                        <td><p>23.6</p></td>
                        <td><p>23.6</p></td>
                        <td><p style="color:#00C8FF">23.6</p></td>
                        <td><p style="color:#00FF00">23.6</p></td>
                        <td><p>23.6</p></td>
                        <td><p>23.6</p></td>
                    </tr>
                    <tr>
                        <td><p>水</p></td>
                        <td><p>23.6</p></td>
                        <td><p>23.6</p></td>
                        <td><p style="color:#00C8FF">23.6</p></td>
                        <td><p style="color:#00FF00">23.6</p></td>
                        <td><p>23.6</p></td>
                        <td><p>23.6</p></td>
                    </tr>
                    <tr>
                        <td><p>天然气</p></td>
                        <td><p>23.6</p></td>
                        <td><p>23.6</p></td>
                        <td><p style="color:#00C8FF">23.6</p></td>
                        <td><p style="color:#00FF00">23.6</p></td>
                        <td><p>23.6</p></td>
                        <td><p>23.6</p></td>
                    </tr>
                    <tr>
                        <td><p>油</p></td>
                        <td><p>23.6</p></td>
                        <td><p>23.6</p></td>
                        <td><p style="color:#00C8FF">23.6</p></td>
                        <td><p style="color:#00FF00">23.6</p></td>
                        <td><p>23.6</p></td>
                        <td><p>23.6</p></td>
                    </tr>
                    <tr>
                        <td><p>媒</p></td>
                        <td><p>23.6</p></td>
                        <td><p>23.6</p></td>
                        <td><p style="color:#00C8FF">23.6</p></td>
                        <td><p style="color:#00FF00">23.6</p></td>
                        <td><p>23.6</p></td>
                        <td><p>23.6</p></td>
                    </tr>
                    <tr>
                        <td><p>生物质</p></td>
                        <td><p>23.6</p></td>
                        <td><p>23.6</p></td>
                        <td><p style="color:#00C8FF">23.6</p></td>
                        <td><p style="color:#00FF00">23.6</p></td>
                        <td><p>23.6</p></td>
                        <td><p>23.6</p></td>
                    </tr>
                    <tr>
                        <td><p>综合成本</p></td>
                        <td><p>23.6</p></td>
                        <td><p>23.6</p></td>
                        <td><p style="color:#00C8FF">23.6</p></td>
                        <td><p style="color:#00FF00">23.6</p></td>
                        <td><p>23.6</p></td>
                        <td><p>23.6</p></td>
                    </tr>
                </tbody>
            </table>

            <div class="flex-box" style="margin-top: 20px;">
                <div class="item flex" style="margin-right: 20px;">
                    <div class="item-hd">月综合成本趋势图</div>
                    <div class="item-bd">
                        <div id="yzhcb"></div>
                    </div>
                </div>
                <div class="item flex">
                    <div class="item-hd">月用电成本趋势图</div>
                    <div class="item-bd">
                        <div id="yydcb"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="loading" style="display: none;" v-show="loadingFlag">
        <div class="svg-loading">
            <svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="circle" class="g-circles g-circles--v1">
                    <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35"
                            cy="16.6987298" r="10"></circle>
                    <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) "
                            cx="16.6987298" cy="35" r="10"></circle>
                    <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60"
                            r="10"></circle>
                    <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) "
                            cx="16.6987298" cy="85" r="10"></circle>
                    <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) "
                            cx="35" cy="103.30127" r="10"></circle>
                    <circle id="7" cx="60" cy="110" r="10"></circle>
                    <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) "
                            cx="85" cy="103.30127" r="10"></circle>
                    <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) "
                            cx="103.30127" cy="85" r="10"></circle>
                    <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60"
                            r="10"></circle>
                    <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) "
                            cx="103.30127" cy="35" r="10"></circle>
                    <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85"
                            cy="16.6987298" r="10"></circle>
                    <circle id="1" cx="60" cy="10" r="10"></circle>
                </g>

                <use xlink:href="#circle" class="use"/>
            </svg>

        </div>
    </div>
</div>
</body>
<script src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../js/zTree/js/jquery.ztree.excheck.js"></script>
<script src="../js/My97DatePicker/WdatePicker.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/cbfx.js"></script>
<script src="../js/common.js"></script>
</html>